<template>
	<view class="home-list">
		<view 
		class="home-list-item u-f-ac u-f-jsb" 
		hover-class="home-list-hover"
		@tap="clickevent">
			<view class="u-f-ac">
				<view v-if="oper.icon" class="icon iconfont" :class="'icon-' + oper.icon" :style="oper.color ? ('color:' + oper.color) : ''"></view>
				{{oper.name}}
			</view>
			<view class="icon iconfont icon-jinru"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			oper: Object
		},
		methods:{
			clickevent(){
				switch (this.oper.clicktype){
					case 'navigateTo':
						if(this.oper.url){
							uni.navigateTo({
								url: this.oper.url
							});
						}
						break;
					case 'clearCache':
						uni.showModal({
							title: '提示',
							content: '是否要清除缓存？',
							confirmText: '立刻清除',
							success: (res) => {
								if(res.confirm){
									uni.clearStorage();
									uni.showToast({
										title:'清除缓存成功'
									})
								}
							}
						});
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.home-list{
		padding: 0 20upx;
	}
	.home-list-item{
		padding: 20upx;
		border-bottom: 1upx solid #F4F4F4;
	}
	.home-list-hover{
		background: #EEEEEE;
	}
	.home-list-item>view:first-child{
		color: #333333;
	}
	.home-list-item>view:first-child>view{
		margin-right: 10upx;
	}
	.home-list-item>view:last-child{
		color: #CCCCCC;
	}
</style>
